<template>
  <div class="mine-wrap">
    <div class="bg"></div>
    <div class="tool">
      <div class="user">
        <van-row>
          <van-col span="23">
            <van-row>
              <van-col span="4">
                <van-image
                  width="50"
                  height="50"
                  round
                  src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
              </van-col>
              <van-col span="20" style="color:white">
                <p class="fs-m p-t-xs van-ellipsis">阿斯顿哇塞</p>
                <p class="fs-s p-t-xs van-ellipsis">编辑个人资料</p>
              </van-col>
            </van-row>
          </van-col>
          <van-col span="1">
            <div class="df user-link">
              <van-icon name="arrow" color="white" />
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="card shadow bg-white">
        <div class="card-header p-xl  m-t-l van-hairline--bottom">
          我的钱包
        </div>
        <van-row class="text-center">
          <van-col span="8">
            <p class="m-t-s m-b-l fs-s">余额</p>
            <p class="m-t-s m-b-l ">0.00</p>
          </van-col>
          <van-col span="8">
            <p class="m-t-s m-b-l fs-s">收益</p>
            <p class="m-t-s m-b-l ">0.00</p>
          </van-col>
          <van-col span="8">
            <p class="m-t-s m-b-l fs-s">分享人数</p>
            <p class="m-t-s m-b-l ">0</p>
          </van-col>
        </van-row>
      </div>

      <div class="card bg-white shadow">
        <div class="card-header p-xl  m-t-l van-hairline--bottom">
          <van-row>
            <van-col span="18">我的订单</van-col>
            <van-col span="6"
              >全部订单
              <van-icon class="middle" name="arrow" />
            </van-col>
          </van-row>
        </div>

        <van-grid class="p-b-l" :clickable="true">
          <van-grid-item text="待付款">
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use xlink:href="#icon-rich"></use>
            </svg>
          </van-grid-item>
          <van-grid-item text="待发货">
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use xlink:href="#icon--"></use>
            </svg>
          </van-grid-item>
          <van-grid-item text="已完成">
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use xlink:href="#icon-shouhuo"></use>
            </svg>
          </van-grid-item>
          <van-grid-item text="待评价">
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use xlink:href="#icon-input"></use>
            </svg>
          </van-grid-item>
        </van-grid>
      </div>

      <div class="card bg-white shadow">
        <div class="card-header p-xl  m-t-l van-hairline--bottom">
          我的工具
        </div>
        <van-grid class="p-b-l" :clickable="true">
          <van-grid-item
            :text="item.title"
            v-for="(item, index) in toolData"
            :key="index"
          >
            <svg slot="icon" class="icon tool-icon" aria-hidden="true">
              <use v-bind:xlink:href="item.icon"></use>
            </svg>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { userInfo } from "@/api/mine.js";
export default {
  name: "Mine",
  data() {
    return {
      toolData: [
        {
          icon: "#icon-smart",
          title: "分销中心",
          ink: ""
        },
        {
          icon: "#icon-purse",
          title: "我的卡券",
          ink: ""
        },
        {
          icon: "#icon-active",
          title: "我的收藏",
          ink: ""
        },
        {
          icon: "#icon-jifen",
          title: "我的积分",
          ink: ""
        },
        {
          icon: "#icon-fenxiang",
          title: "我的分享",
          ink: ""
        },
        {
          icon: "#icon-shijian",
          title: "我的活动",
          ink: ""
        },
        {
          icon: "#icon-input",
          title: "我的报名",
          ink: ""
        },
        {
          icon: "#icon-coupons",
          title: "观看记录",
          ink: ""
        },
        {
          icon: "#icon-xiazaiapp",
          title: "下载APP",
          ink: ""
        },
        {
          icon: "#icon-womendechengyuan",
          title: "联系我们",
          ink: ""
        },
        {
          icon: "#icon-svg-",
          title: "商家入驻",
          ink: ""
        }
      ]
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      userInfo()
        .then(res => {
          console.log(res);
        })
        .then(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.mine-wrap {
  .bg {
    top: 0;
    left: 0;
    right: 0;
    height: 11.5385 * $size;
    background: url(https://img.zcool.cn/community/01dec15bd6d796a801213deafc13b3.jpg@1280w_1l_0o_100sh.jpg)
      center;
    z-index: -1;
  }
  .user-link {
    height: 50px;
    align-items: center;
  }
  .tool {
    margin-top: -11.5385 * $size;
    padding: 3.0769 * $size 1.5385 * $size 1rem;
    .card {
      border-radius: 0.3846rem;
    }
  }
  .tool-icon {
    font-size: $size * 1.9231;
  }
}
</style>
